<template>
  <div class="container">
    <div class="map-chart" id="mapChart"></div>
    <slot></slot>
  </div>
</template>

<script>
import my from "./my.json";
import az from "./az.json";
import bc from "./bc.json";
import fc from "./fc.json";
import jy from "./jy.json";
import pw from "./pw.json";
import st from "./st.json";
import yt from "./yt.json";
import yx from "./yx.json";
import zt from "./zt.json";
import echarts from "echarts/lib/echarts";
import "echarts-gl";
import axios from "axios";
export default {
  components: {},
  props: {
    data: {
      type: Array,
      default: () => {
        return [
          { name: "平武县", value: 12, color: "#0079ff" },
          { name: "北川羌族自治区", value: 11, color: "#1da2ff" },
          { name: "安州区", value: 13, color: "#6bbcff" },
          { name: "江油市", value: 14, color: "#aed9ff" },
          { name: "涪城区", value: 15, color: "#b0cfff" },
          { name: "游仙区", value: 16, color: "#d6d9ff" },
          { name: "梓潼县", value: 17, color: "#f7d4ff" },
          { name: "三台县", value: 18, color: "#ebdfff" },
          { name: "盐亭县", value: 18, color: "#ffd5e2" }
        ];
      }
    },
    title: {
      type: String,
      default: "绵阳市"
    },
    mapSize: {
      type: Number,
      default: 350
    },
    mapPosition: {
      type: Array,
      default: () => ["50%", "20%"]
    },
    titlePosition: {
      type: String,
      default: "center"
    },
    mapType: {
      type: String,
      default: "map"
    },
    backgroundColor: {
      type: String,
      default: "#fff"
    },
    area: {
      type: String,
      default: "my"
    }
  },
  data() {
    return {
      sweaperIndex: 0,
      mapChart: null
    };
  },
  watch: {},
  computed: {
    borderWidth() {
      return this.mapType == "map" ? 2 : 1;
    },
    borderColor() {
      return "#fff";
    },
    chartData() {
      return this.data.map(v => {
        const obj = {
          ...v,
          itemStyle: {
            normal: {
              color: this.mapType == "map" ? v.color : "#375ab3",
              areaColor: v.color
            }
          }
          // regionHeight: 800
        };
        for (let x of my.features) {
          if (x.properties.name == v.name) {
            obj.value = x.properties.center;
          }
        }
        return obj;
      });
    }
  },
  methods: {
    getGeo() {
      switch (this.area) {
        case "my":
          return my;
        case "bc":
          return bc;
        case "az":
          return az;
        case "jy":
          return jy;
        case "zt":
          return zt;
        case "yx":
          return yx;
        case "yt":
          return yt;
        case "fc":
          return fc;
        case "pw":
          return pw;
        case "st":
          return st;
        default:
          return my;
      }
    },
    initMapChart({ isResize } = {}) {
      if (isResize && this.mapChart) {
        return this.mapChart.resize();
      }

      let geoJson = this.getGeo();

      echarts.registerMap(this.area, geoJson);
      this.mapChart = echarts.init(document.getElementById("mapChart"));
      this.mapChart.setOption({
        backgroundColor: this.backgroundColor,
        title: {
          text: this.title,
          left: this.titlePosition
        },
        tooltip: {
          show: true,
          formatter: function(params) {
            if (params.data.nums) {
              return params.name + ":" + params.data.nums;
            } else {
              return params.name;
            }
          }
        },
        // backgroundColor: "#ffffff",
        series: [
          {
            type: this.mapType,
            map: this.area,
            layoutCenter: this.mapPosition,
            layoutSize: this.mapSize,
            label: {
              normal: {
                show: true,
                textStyle: {
                  // 标签的字体样式
                  color: "#ffffff", // 地图初始化区域字体颜色
                  fontSize: 14, // 字体大小
                  backgroundColor:
                    this.mapType == "map3D" ? "rgba(0,23,11,0.5)" : "" // 字体背景色
                }
              },
              emphasis: {
                textStyle: {
                  color: "#fff"
                }
              }
            },

            boxDepth: 150, //地图倾斜度
            regionHeight: 12, //地图厚度
            viewControl: {
              autoRotate: true,
              distance: 180,
              autoRotateSpeed: 10,
              animation: true,
              autoRotateAfterStill: 3,
              animationDurationUpdate: 2000,
              minAlpha: -360 * 10000000, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
              maxAlpha: 360 * 10000000, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
              minBeta: -360 * 10000000, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
              maxBeta: 360 * 10000000 // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
            },

            textStyle: {
              // 标签的字体样式
              color: "#ffffff", // 地图初始化区域字体颜色
              fontSize: 14, // 字体大小
              opacity: 1 // 字体透明度
            },
            itemStyle: {
              // areaColor: 'rgba(95,158,160,0.5)', // 地图板块的颜色
              opacity: 1, // 图形的不透明度 [ default: 1 ]
              borderWidth: this.borderWidth, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ]
              borderColor: this.borderColor, // 图形描边的颜色。[ default: #333 ]
              emphasis: {
                areaColor: "#ff4854",
                color: "#ff4854",
                borderWidth: 5
              }
            },
            symbolSize: 20,
            symbol: "circle",
            data: this.chartData
          }
        ]
      });
      this.mapChart.on("mouseover", v => {
        this.$emit("hover", v);
      });
      this.mapChart.on("click", v => {
        this.$emit("click", v);
      });
    },
    setHightLight(v) {
      this.mapChart.dispatchAction({
        type: "downplay",
        seriesIndex: this.chartData.map((s, k) => k)
      });
      this.mapChart.dispatchAction({
        type: "highlight",
        dataIndex: v.detail.index
      });
    }
  },
  created() {},
  mounted() {
    window.addEventListener("setHightLight", this.setHightLight);
    this.initMapChart();
    setInterval(() => {
      this.sweaperIndex++;
    }, 4000);
  }
};
</script>
<style lang="scss" scoped>
$background-blur: rgba(0, 0, 0, 0.3);
$background-main-blur: rgba(31, 122, 129, 0.2);

$colorMain: #00fffe;
$colorPlain: #fff;

@media screen and (max-width: 2560px) {
  // 2k
  .container {
    // width: 1680px;
  }
}
@media screen and (max-width: 1920px) {
  .container {
    // width: 1480px;
  }
}
@media screen and (max-width: 1440px) {
  .container {
    // width: 312px;
  }
}
@media screen and (max-width: 1366px) {
  .container {
    // width: 296px;
  }
}
.container {
  position: relative;
  height: 100%;
  display: flex;
}
#mapChart {
  width: 100%;
  // height: 100%;
}
.tool-tips {
  position: absolute;
  top: 40px;
  left: 40px;
  z-index: 20;
  width: 245px;
  height: 240px;
  padding: 20px;
  background: $background-main-blur;
  border: 1px solid $colorMain;
  p {
    font-size: 16px;
    font-weight: bold;
    color: $colorMain;
  }
  .addr {
    font-size: 22px;
  }
  .num {
    margin-left: 8px;
    font-size: 18px;
    font-weight: bold;
    color: $colorPlain;
  }
}
</style>
